<template>

   <section>
     <el-card>
     <div style="overflow:auto;">
        <h2 style="margin-bottom:10px;">组织架构树</h2>
        <el-tree
          :data="dataTree"
          node-key="id"
          highlight-current
           @node-click="nodeClick" 
          :props="defaultProps"
           v-loading="listLoading" 
          :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            {{ node.label }}
          </span>
        </el-tree>
      </div> 
     </el-card>
   </section>
</template>

<script>
import store from "@/store";
import { createNamespacedHelpers } from "vuex";
const { mapActions ,mapGetters} = createNamespacedHelpers("system/employee");

import api from "@/service/api";
import http from "@/service/http";

let id = 1000;
let flag = false;
let targetNode; //当前要操作的node
export default {
  data() {
    return {
      selectNodeClass:false,
      dialogTitle: "",
      dataTree: [],
      itemAddMenu: [],
      listLoading: false,
      optionLoading: false,
      loading: false,
      dialogFormVisible: false,
      addForm: {
        groupName: ""
      },
      addGroup:{name:'',pId:'',type:''},
      defaultProps: {
        children: "child",
        label: "name"
      },
      rules: {
        groupName: [{ required: true, message: "请输入名称", trigger: "blur" }]
      }
    };
  },
  //计算属性
  computed: {
    //导入store的getters属性
    ...mapGetters(['groupId']),
  },
  methods: {
    //导入actions方法
    ...mapActions(['selectGroup']),

    nodeClick(data){
      
      this.selectGroup(data.id);
    },

    getGroupTree() {
      this.listLoading = true;
      var search = { pageNum: this.currentPage, pageSize: this.pageSize };
      http.post(api.sysApi.groupTree, "").then(data => {
        if(!data.success){
          return;
        }
        this.dataTree = data.data;
        this.listLoading = false;
      });
    },

    visibleChange(node, data) {
      targetNode = node;
      if (flag) {
      } else {
        //更具node生成菜单
        this.itemAddMenu = []; //置空
        let type = node.data.type; // 1公司，2部门
        if (type == 1) {
          const menu1 = { optionType: 1, type: 1, lable: "同级公司" };
          const menu2 = { optionType: 2, type: 1, lable: "下级公司" };
          const menu3 = { optionType: 3, type: 1, lable: "下级部门" };
          this.itemAddMenu.push(menu1);
          this.itemAddMenu.push(menu2);
          this.itemAddMenu.push(menu3);
        } else if (type == 2) {
          const menu1 = { optionType: 1, type: 2, lable: "同级部门" };
          const menu2 = { optionType: 2, type: 2, lable: "下级部门" };
          this.itemAddMenu.push(menu1);
          this.itemAddMenu.push(menu2);
        }
      }
      flag = !flag;
    },
    handleCommand(command) {
      this.addGroup = {};
      //  targetNode
      if (targetNode.data.type == 1) {
        //公司
        if (command === "menuOption0") {
            this.dialogTitle = "添加同级公司";
            this.addGroup.type = 1;
            this.addGroup.pId = targetNode.data.pid;
        }else if (command === "menuOption1") {
            this.dialogTitle = "添加下级公司";
            this.addGroup.type = 1;
            this.addGroup.pId = targetNode.data.id;
        }else{
            this.dialogTitle = "添加下级部门";
            this.addGroup.type = 2;
            this.addGroup.pId = targetNode.data.id;
        }
      } else {
        //部门
        if (command === "menuOption0") {
            this.dialogTitle = "添加同级部门";
            this.addGroup.type = 2;
            this.addGroup.pId = targetNode.data.pid;
        }else if (command === "menuOption1") {
            this.dialogTitle = "添加下级部门";
            this.addGroup.type = 2;
            this.addGroup.pId = targetNode.data.id;
        }
      }
      this.dialogFormVisible = true;
    },
    delConfirm(node, data) {
      this.$confirm("此操作将删除 [ " + data.name + " ], 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (data.child.length != 0) {
            this.$message({
              type: "error",
              message: data.name + " 存在下级,不可删除。"
            });
          } else {
            this.removeGroup(data);
          }
        })
        .catch(() => {
          //取消
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.addGroup.name = this.addForm.groupName;
          this.addOneGroup(this.addGroup);
        } else {
          return false;
        }
      });
    },
    addOneGroup(data) {
      this.listLoading = true;
      http.post(api.sysApi.addGroup, data).then(data => {
        if(!data.success){
          return;
        }
        this.listLoading = false;
        this.dialogFormVisible = false;
        this.$message({
          type: "success",
          message: "添加成功"
        });
        this.getGroupTree();
      });
    },
    removeGroup(data) {
      this.listLoading = true;
      http.post(api.sysApi.delGroupById, data).then(data => {
        if(!data.success){
          return;
        }
        this.listLoading = false;
        this.$message({
          type: "success",
          message: "删除成功"
        });
        this.getGroupTree();
      });
    }
  },
  mounted() {
    this.getGroupTree();
  }
};
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.el-tree-node__content {
  height: 36px;
}
</style>
